<template>
  <div class="offer-box" v-if="stockMoreInfo && stockInfo.detail">
    <div class="indicators">
      <h2>{{ $t("account.offer.56ijqyt9uz40") }}</h2>
      <ul class="f-cb lists">
        <li>
          {{ $t("account.offer.56ijqyt9w4c0") }}
          <span
            :class="
              tradeWSData.high > tradeWSData.close
                ? 'red'
                : tradeWSData.high == tradeWSData.close
                ? ''
                : 'green'
            "
            >{{
              Number(tradeWSData.high).toFixed(stockInfo.detail.precision)
            }}</span
          >
        </li>
        <li>
          {{ $t("account.offer.56ijqyt9wi40") }}
          <span
            :class="
              tradeWSData.low > tradeWSData.close
                ? 'red'
                : tradeWSData.low == tradeWSData.close
                ? ''
                : 'green'
            "
            >{{
              Number(tradeWSData.low).toFixed(stockInfo.detail.precision)
            }}</span
          >
        </li>
        <li>
          {{ $t("account.offer.56ijqyt9wws0") }}
          <span
            :class="
              tradeWSData.open > tradeWSData.close
                ? 'red'
                : tradeWSData.open == tradeWSData.close
                ? ''
                : 'green'
            "
            >{{
              Number(tradeWSData.open).toFixed(stockInfo.detail.precision)
            }}</span
          >
        </li>
        <li>
          {{ $t("account.offer.56ijqyt9x6c0") }}
          <span>{{
            Number(tradeWSData.close).toFixed(stockInfo.detail.precision)
          }}</span>
        </li>
        <li>
          {{ $t("account.offer.56ijqyt9xf40") }}
          <span>{{ tradeWSData.amount | changeNum(te) }}</span>
        </li>
        <li>
          {{ $t("account.offer.56ijqyt9xn40") }}
          <span>{{ tradeWSData.volume | changeNum(te) }}</span>
        </li>
        <li v-if="stockMoreInfo.securityType == 1">
          {{ $t("account.offer.56ijqyt9xus0") }}
          <span>{{ (stockMoreInfo.amplitude * 100).toFixed(2) }}%</span>
        </li>
        <li v-if="stockMoreInfo.securityType == 1">
          {{ $t("account.offer.56ijqyt9y2w0") }}
          <span>{{
            stockMoreInfo.dividend
              ? Number(stockMoreInfo.dividend).toFixed(3)
              : "--"
          }}</span>
        </li>
        <li v-if="stockMoreInfo.securityType == 1">
          {{ $t("account.offer.56ijqyt9yaw0") }}
          <span
            >{{ stockMoreInfo.lotSize
            }}{{ $t("account_dialog.charging_dialog.56htmhsg8eo0") }}</span
          >
        </li>
        <li v-if="stockMoreInfo.securityType == 1">
          {{ $t("account.offer.56ijqyt9yig0") }}
          <span>{{ stockMoreInfo.totalShares | changeNum(te) }}</span>
        </li>
        <li v-if="stockMoreInfo.securityType == 1">
          {{ $t("account.offer.56ijqyt9yqo0") }}
          <span>{{ stockMoreInfo.marketValue | changeNum(te) }}</span>
        </li>
        <li v-if="stockMoreInfo.securityType == 1">
          {{ $t("account.offer.56ijqyt9yyk0") }}
          <span>{{ (stockMoreInfo.turnover * 100).toFixed(2) }}%</span>
        </li>
        <li v-if="stockMoreInfo.securityType == 1">
          {{ $t("account.offer.56ijqyt9z6w0") }}
          <span>{{
            stockMoreInfo.pb ? Number(stockMoreInfo.pb).toFixed(2) : "--"
          }}</span>
        </li>
        <li v-if="stockMoreInfo.securityType == 1">
          {{ $t("account.offer.56ijqyt9zi00") }}
          <span>{{
            stockMoreInfo.pe ? Number(stockMoreInfo.pe).toFixed(2) : "--"
          }}</span>
        </li>
      </ul>
    </div>
    <div
      v-if="
        financeQuestion.detail &&
        financeQuestion.detail != 'undefined' &&
        financeQuestion.detail != null
      "
    >
      <div
        class="Margintradingadata"
        v-if="
          stockInfo.detail.isSupportFinance == 1 &&
          stockInfo.detail.isSupportShort == 1
        "
      >
        <h2>{{ $t("account.offer.56ijqyt9zq80") }}</h2>
        <ul class="f-cb">
          <li>
            {{ $t("account.offer.56ijqyt9zy80")
            }}<span
              >{{
                (financeQuestion.detail.buyLongRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta0640") }}
            <span
              >{{
                (financeQuestion.detail.shortSellRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta0e00") }}
            <span
              >{{
                (financeQuestion.detail.buyLongKeepRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta0mc0") }}
            <span
              >{{
                (financeQuestion.detail.shortSellKeepRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta0w80") }}
            <span
              >{{
                (financeQuestion.detail.shortSellFeeRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta1300") }}
            <span>{{
              financeQuestion.detail.shortSellSurplus | changeNum(te)
            }}</span>
          </li>
        </ul>
      </div>
      <div
        class="Margintradingadata"
        v-else-if="
          stockInfo.detail.isSupportFinance == 1 &&
          stockInfo.detail.isSupportShort == 0
        "
      >
        <h2>{{ $t("account.offer.56ijqyta1cg0") }}</h2>
        <ul class="f-cb">
          <li>
            {{ $t("account.offer.56ijqyt9zy80")
            }}<span
              >{{
                (financeQuestion.detail.buyLongRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta0e00") }}
            <span
              >{{
                (financeQuestion.detail.buyLongKeepRate * 100).toFixed(0)
              }}%</span
            >
          </li>
        </ul>
      </div>
      <div
        class="Margintradingadata"
        v-else-if="
          stockInfo.detail.isSupportFinance == 0 &&
          stockInfo.detail.isSupportShort == 1
        "
      >
        <h2>{{ $t("account.offer.56ijqyta1jw0") }}</h2>
        <ul class="f-cb">
          <li>
            {{ $t("account.offer.56ijqyta0640") }}
            <span
              >{{
                (financeQuestion.detail.shortSellRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta0mc0") }}
            <span
              >{{
                (financeQuestion.detail.shortSellKeepRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta0w80") }}
            <span
              >{{
                (financeQuestion.detail.shortSellFeeRate * 100).toFixed(0)
              }}%</span
            >
          </li>
          <li>
            {{ $t("account.offer.56ijqyta1300") }}
            <span>{{
              financeQuestion.detail.shortSellSurplus | changeNum(te)
            }}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 港股LV2有明细,美股LV1有明细,沪深LV1有明细 -->
    <div
      class="DealByDeal f-cb"
      v-if="
        level.HK &&
        level.CN &&
        level.US &&
        stockMoreInfo.securityType == 1 &&
        ((stockMoreInfo.market == 'HKEX' && level.HK.level == 2) ||
          (stockMoreInfo.market == 'US' && level.US.level >= 1) ||
          ((stockMoreInfo.market == 'SSE' || stockMoreInfo.market == 'SZSE') &&
            level.CN.level >= 1))
      "
    >
      <!-- <h2>逐笔成交<span class="ico"></span></h2> -->
      <h2>
        <span>{{ $t("account.offer.56ijqyta1qg0") }}</span>
      </h2>
      <div class="deal_title">
        <div class="deal_item" style="padding-right: 14px">
          <span>{{ $t("account.offer.56ijqyta1ww0") }}</span>
          <span>{{ $t("account.offer.56ijqyta2380") }}</span>
          <span>{{ $t("account.offer.56ijqyt9xn40") }}</span>
        </div>
        <div class="deal_item">
          <span>{{ $t("account.offer.56ijqyta1ww0") }}</span>
          <span>{{ $t("account.offer.56ijqyta2380") }}</span>
          <span>{{ $t("account.offer.56ijqyt9xn40") }}</span>
        </div>
      </div>
      <div class="f-cb trade_lists">
        <ul v-show="tradeWSList.length <= 0">
          <li class="f-cb" v-for="(item, i) in tradeList" :key="i">
            <div class="li_items">
              <span v-if="stockMoreInfo.market == 'US'" class="fl li_fl">{{
                item.tradeTime | toNewYork
              }}</span>
              <span v-else class="fl li_fl">{{ item.tradeTime | date }}</span>
              <span
                :class="
                  Number(item.tradePrice) > Number(stockMoreInfo.close)
                    ? 'red'
                    : Number(item.tradePrice) == Number(stockMoreInfo.close)
                    ? 'white'
                    : 'green'
                "
                class="li_fc"
                >{{
                  Number(item.tradePrice).toFixed(stockInfo.detail.precision)
                }}</span
              >
              <div class="li_fr">
                <span class="white">{{
                  item.tradeVolume | changeNum(te)
                }}</span>
                <span
                  :class="
                    item.direction == 'B'
                      ? 'red'
                      : item.direction == 'S'
                      ? 'green'
                      : 'white'
                  "
                  >{{ item.direction }}</span
                >
              </div>
            </div>
          </li>
        </ul>
        <ul v-show="tradeWSList.length > 0">
          <li class="f-cb" v-for="(item, i) in tradeWSList" :key="i">
            <div class="li_items">
              <span v-if="stockMoreInfo.market == 'US'" class="fl li_fl">{{
                item[2] | toNewYork
              }}</span>
              <span v-else class="fl li_fl">{{ item[2] | date }}</span>
              <!-- 成交价 -->
              <span
                :class="
                  Number(item[4]) > Number(stockMoreInfo.close)
                    ? 'red'
                    : Number(item[4]) == Number(stockMoreInfo.close)
                    ? 'white'
                    : 'green'
                "
                class="li_fc"
                >{{ Number(item[4]).toFixed(stockInfo.detail.precision) }}</span
              >
              <div class="li_fr">
                <!-- 成交量 -->
                <span class="white">{{ item[5] | changeNum(te) }}</span>
                <span
                  :class="
                    item[6] == 'B' ? 'red' : item[6] == 'S' ? 'green' : 'white'
                  "
                  >{{ item[6] }}</span
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 买卖盘口 -->
    <div
      class="SmellAndBuy f-cb"
      v-if="
        ask &&
        bid &&
        level.HK &&
        level.CN &&
        level.US &&
        stockMoreInfo.securityType == 1 &&
        ((stockMoreInfo.market == 'HKEX' && level.HK.level == 2) ||
          (stockMoreInfo.market == 'US' && level.US.level >=1 ) ||
          ((stockMoreInfo.market == 'SSE' || stockMoreInfo.market == 'SZSE') &&
            level.CN.level >= 1))
      "
    >
      <div class="pan" v-if="level.CN.level == 1 || level.US.level == 1">
        <p>{{ $t("account.offer.56ijqyta29g0") }}</p>
        <p>{{ $t("account.offer.56ijqyta2g00") }}</p>
      </div>
      <div class="pan" v-else-if="level.HK.level == 2 || level.CN.level > 1">
        <p>{{ $t("account.offer.56ijqyta2m80") }}</p>
        <p>{{ $t("account.offer.56ijqyta2sg0") }}</p>
      </div>
      <div class="f-cb Proportion">
        <div class="color_pre">
          <p
            class="fl bgred"
            :style="`width: ${bidProportion}%;height: 100%`"
          ></p>
          <p
            class="fr bggreen"
            :style="`width: ${askProportion}%;height: 100%`"
          ></p>
        </div>
        <span class="fl_span">{{ bidProportion }}%</span>
        <span class="fr_span">{{ askProportion }}%</span>
      </div>
      <ul class="f-cb ul_left">
        <li class="half" v-for="(item, i) in bid" :key="i">
          <div class="list">
            <span class="num bgred">{{ item.depthNo }}</span>
            <span
              class="list_price"
              :class="
                Number(stockMoreInfo.close) == Number(item.price)
                  ? 'white'
                  : Number(stockMoreInfo.close) < Number(item.price)
                  ? 'red'
                  : 'green'
              "
              >{{
                item.price
                  ? Number(item.price).toFixed(stockInfo.detail.precision)
                  : "-"
              }}</span
            >
            <span v-if="Number(item.vol) != 0" class="kbs">{{
              item.vol | changeNum(te)
            }}</span>
            <span v-else class="kbs">-</span>
          </div>
        </li>
      </ul>
      <ul class="f-cb ul_right">
        <li class="half" v-for="(item, i) in ask" :key="i">
          <div class="list">
            <div v-if="Number(item.vol) != 0" class="kbs">
              {{ item.vol | changeNum(te) }}
            </div>
            <div v-else class="kbs">-</div>
            <div
              class="list_price"
              :class="
                Number(stockMoreInfo.close) == Number(item.price)
                  ? 'white'
                  : Number(stockMoreInfo.close) < Number(item.price)
                  ? 'red'
                  : 'green'
              "
              v-if="item.price"
            >
              {{ Number(item.price).toFixed(stockInfo.detail.precision) }}
            </div>
            <div v-else class="list_price">-</div>
            <div class="num bggreen">{{ item.depthNo }}</div>
          </div>
        </li>
      </ul>
    </div>
    <div
      class="Economics f-cb"
      v-if="level.HK && level.HK.level == 2 && stockMoreInfo.market == 'HKEX'"
    >
      <ul>
        <li>
          <h2>{{ $t("account.offer.56ijqyta2ys0") }}</h2>
          <div class="buy_pan">
            <div
              class="bgred lists f-cb"
              v-for="(item, index) in buyBrokerList"
              :key="index"
            >
              <h3>
                <span class="first">{{$t('account.offer.56wgu3wv2m80')}}{{ item.level }}</span>
                <span class="second">{{
                  Number(item.price).toFixed(stockInfo.detail.precision)
                }}</span>
                <span class="thrid">{{ item.list.length }}</span>
              </h3>
              <p v-for="(item1, i) in item.list" :key="i">
                <span class="first">{{ item1.brokerId }}</span>
                <span class="second" v-if="lang == 'zh-CN'">{{
                  item1.brokerName
                }}</span>
                <span class="second" v-else>{{ item1.brokerNameEN }}</span>
              </p>
            </div>
          </div>
        </li>
        <li>
          <h2>{{ $t("account.offer.56ijqyta3540") }}</h2>
          <div class="buy_pan">
            <div
              class="bggreen lists f-cb"
              v-for="(item, index) in sellBrokerList"
              :key="index"
            >
              <h3>
                <span class="first">{{$t('account.offer.56wgu3wv40k0')}}{{ item.level }}</span>
                <span class="second">{{
                  Number(item.price).toFixed(stockInfo.detail.precision)
                }}</span>
                <span class="thrid">{{ item.list.length }}</span>
              </h3>
              <p v-for="(item1, i) in item.list" :key="i">
                <span class="first">{{ item1.brokerId }}</span>
                <span class="second" v-if="lang == 'zh-CN'">{{
                  item1.brokerName
                }}</span>
                <span class="second" v-else>{{ item1.brokerNameEN }}</span>
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {get_stock_trade, get_stock_pankou, get_broker} from '@/assets/js/API/market.js'
import dayjs from "dayjs";
import * as timezone from "dayjs/plugin/timezone"; // import plugin
import * as utc from "dayjs/plugin/utc"; // import plugin
// import * as _ from 'lodash';
// 配置使用处理相对时间的插件
dayjs.extend(utc);
dayjs.extend(timezone);
export default {
  props: ["offerData", "quotation"],
  data() {
    return {
      lang: "en",
      tradeList: [], // 交易列表
      tradeWSList: [], // 交易列表
      ask: [], // 卖盘十档
      bid: [], // 买盘十档
      askProportion: 0, // 卖盘占比
      bidProportion: 0, //买盘占比
      buyBrokerList: [], // 买盘经济
      sellBrokerList: [], // 卖盘经济
      tradeWSData: {
        high: "",
        low: "",
        open: "",
        close: "",
        volume: "",
        amount: "",
      }, // 当前股票交易推送
      setTime: null, // 5秒定时请求
    };
  },
  created() {},
  mounted() {
    this.lang = localStorage.getItem("lang") == "en" ? "en" : "zh-CN";
    this.getTradeRecord();
    this.getStockPankou();
    this.getBroker();
  },
  beforeDestroy() {
    if (this.setTime) {
      clearInterval(this.setTime); //关闭定时器
      this.setTime = null;
    }
  },
  methods: {
    // 得到股票交易信息
    async getTradeRecord() {
      if (this.stockMoreInfo.symbol && this.stockMoreInfo != null) {
        const res = await get_stock_trade({
            symbol: this.stockMoreInfo.symbol,
            securityType: this.stockMoreInfo.securityType,
            market: this.stockMoreInfo.market,
            pageSize: 20,
          }); 
        if (res.code != 1) return this.$message.error(res.msg);
        this.tradeList = res.data.list;
      }
    },
    // 得到盘口信息
    async getStockPankou() {
      if (
        this.stockMoreInfo &&
        this.stockMoreInfo != null &&
        this.stockMoreInfo.securityType == 1
      ) {
        const res = await get_stock_pankou({
            symbol: this.stockMoreInfo.symbol,
            securityType: this.stockMoreInfo.securityType,
            market: this.stockMoreInfo.market,
          });
        if (res.code != 1) return this.$message.error(res.msg);
        if (res.data.ask && res.data.bid) {
          this.ask = res.data.ask;
          this.bid = res.data.bid;
          if (
            this.stockMoreInfo.market == "SSE" ||
            this.stockMoreInfo.market == "SZSE"
          ) {
            if (this.level.CN.level == 1) {
              this.ask = this.ask.slice(0, 5);
              this.bid = this.bid.slice(0, 5);
            }
          }
          this.askProportion = (
            (this.ask[0].vol / (this.ask[0].vol + this.bid[0].vol)) *
            100
          ).toFixed(0);
          this.bidProportion = (
            (this.bid[0].vol / (this.ask[0].vol + this.bid[0].vol)) *
            100
          ).toFixed(0);
        }
      }
    },
    // 得到经济队列数据
    async getBroker() {
      if (
        this.stockMoreInfo.market == "HKEX" &&
        this.level.HK.level == 2 &&
        this.stockMoreInfo.securityType == 1
      ) {
        const res = await get_broker({
            symbol: this.stockMoreInfo.symbol,
            securityType: this.stockMoreInfo.securityType,
            market: this.stockMoreInfo.market,
          });
        if (res.code != 1) return this.$message.error(res.msg);
        this.buyBrokerList = res.data.detail.buy;
        this.sellBrokerList = res.data.detail.sell;
      }
    },
  },
  filters: {
    date(val) {
      return dayjs(val * 1000).format("HH:mm");
    },
    // 纽约时间为GMT-5
    toNewYork(val) {
      return dayjs(val * 1000)
        .tz("America/Toronto")
        .format("HH:mm");
    },
  },
  computed: {
    stockMoreInfo() {
      return this.$store.state.index.stockMoreInfo;
    },
    stockInfo() {
      return this.$store.state.index.stockInfo;
    },
    StockData() {
      return this.$store.state.index.StockData;
    },
    financeQuestion() {
      return this.$store.state.index.financeQuestion;
    },
    level() {
      return this.$store.state.index.level;
    },
  },
  watch: {
    offerData(val) {
      console.log(val);
    },
    // 股票信息变动刷新数据
    stockInfo: {
      handler(val, old) {
        var _this = this;
        // 若存在定时器
        if (this.setTime) {
          clearInterval(this.setTime); //关闭定时器
          this.setTime = null;
        }
        if (val != null && old != null && val.detail.symbol !== old.detail.symbol) {
          _this.$nextTick(() => {
            _this.$set(_this.tradeWSData, "high", val.detail.high);
            _this.$set(_this.tradeWSData, "low", val.detail.low);
            _this.$set(_this.tradeWSData, "open", val.detail.open);
            _this.$set(_this.tradeWSData, "close", val.detail.close);
            _this.$set(_this.tradeWSData, "volume", val.detail.volume);
            _this.$set(_this.tradeWSData, "amount", val.detail.amount);
            // 数据变化清空交易推送列表
            _this.tradeWSList = [];
            _this.ask = [];
            _this.bid = [];
            (_this.askProportion = 0), // 卖盘占比
              (_this.bidProportion = 0), //买盘占比
              _this.$store.dispatch("SetTransaction", "");
          });
          if (old.detail.symbol != val.detail.symbol) {
            this.getTradeRecord();
            this.getStockPankou();
            this.getBroker();
          }
          if (val.detail.market == "SZSE" || val.detail.market == "SSE") {
            // 当前为沪深股且行情等级为1，5秒刷
            if (_this.level.CN.level == 1) {
              _this.setTime = setInterval(() => {
                _this.getTradeRecord();
                _this.getStockPankou();
                _this.getBroker();
              }, 5000);
            }
          }
        }
      },
      deep: true,
      immediate: true,
    },
    // 行情推送监听
    "$store.state.wsModel.quotation": {
      handler(val) {
        var _this = this;
        if (val != "") {
          let vals = JSON.parse(val);
          _this.$nextTick(() => {
            _this.$set(_this.tradeWSData, "high", vals[5]);
            _this.$set(_this.tradeWSData, "low", vals[7]);
            _this.$set(_this.tradeWSData, "open", vals[6]);
            _this.$set(_this.tradeWSData, "close", vals[8]);
            _this.$set(_this.tradeWSData, "volume", vals[9]);
            _this.$set(_this.tradeWSData, "amount", vals[10]);
          });
        }
      },
      deep: true,
    },
    // 交易推送数据
    "$store.state.wsModel.transaction": {
      handler(val, old) {
        var _this = this;
        if (val != "") {
          let vals = JSON.parse(val);
          _this.$nextTick(() => {
            _this.tradeWSList.unshift(...vals);
          });
        }
      },
      deep: true,
    },
    // 盘口推送数据
    "$store.state.wsModel.pankou": {
      handler(val, old) {
        var _this = this;
        if (val != "") {
          let vals = JSON.parse(val);
          // 循环存入买盘或卖盘
          // vals[4]为卖一价，vals[34]为买一价
          let i = 4;
          let m = 0; // 存买卖编号
          let n = 0;
          _this.bid = [];
          _this.ask = [];
          if (_this.StockData.market == "US") {
            // 美股LV1买卖1档
            if (_this.level.US) {
              if (_this.level.US.level >= 1) {
                // 当前股票是沪深的股票
                let asks = {
                  depthNo: "",
                  price: "",
                  vol: "",
                };
                let bids = {
                  depthNo: "",
                  price: "",
                  vol: "",
                };
                bids.depthNo = 1;
                bids.price = vals[4];
                bids.vol = vals[5];
                _this.$nextTick(() => {
                  _this.bid.push(bids);
                });
                asks.depthNo = 1;
                asks.price = vals[6];
                asks.vol = vals[7];
                _this.$nextTick(() => {
                  _this.ask.push(asks);
                });
              }
            }
          }
          while (i < vals.length && _this.StockData.market != "US") {
            let askItem = {
              depthNo: "",
              price: "",
              vol: "",
            };
            if (i < 34) {
              n++;
              askItem.depthNo = n;
              askItem.price = vals[i];
              askItem.vol = vals[i + 2];
              // 当前股为沪深
              if (_this.level.CN.level == 1) {
                if (
                  _this.StockData.market == "SSE" ||
                  _this.StockData.market == "SZSE"
                ) {
                  if (n <= 5) {
                    _this.$nextTick(() => {
                      _this.ask.push(askItem);
                    });
                  }
                }
              } else if (_this.level.CN.level == 2) {
                if (
                  _this.StockData.market == "SSE" ||
                  _this.StockData.market == "SZSE"
                ) {
                  _this.$nextTick(() => {
                    _this.ask.push(askItem);
                  });
                }
              }
              // 当前股为HK
              if (_this.level.HK.level > 1) {
                if (_this.StockData.market == "HKEX") {
                  _this.$nextTick(() => {
                    _this.ask.push(askItem);
                  });
                }
              }
            } else if (i < 64 && i >= 34) {
              m++;
              let bidItem = {
                depthNo: "",
                price: "",
                vol: "",
              };
              bidItem.depthNo = m;
              bidItem.price = vals[i];
              bidItem.vol = vals[i + 2];
              // 当前股为沪深
              if (_this.level.CN.level == 1) {
                if (
                  _this.StockData.market == "SSE" ||
                  _this.StockData.market == "SZSE"
                ) {
                  if (m <= 5) {
                    _this.$nextTick(() => {
                      _this.bid.push(bidItem);
                    });
                  }
                }
              } else if (_this.level.CN.level == 2) {
                if (
                  _this.StockData.market == "SSE" ||
                  _this.StockData.market == "SZSE"
                ) {
                  _this.$nextTick(() => {
                    _this.bid.push(bidItem);
                  });
                }
              }
              // 当前股为HK
              if (_this.level.HK.level > 1) {
                if (_this.StockData.market == "HKEX") {
                  _this.$nextTick(() => {
                    _this.bid.push(bidItem);
                  });
                }
              }
            }
            i = i + 3;
          }
        }
      },
      deep: true,
    },
    ask: {
      handler(val) {
        var _this = this;
        if (val[0]) {
          if (_this.bid[0]) {
            _this.$nextTick(() => {
              _this.askProportion = (
                (Number(val[0].vol) /
                  Number(val[0].vol + Number(_this.bid[0].vol))) *
                100
              ).toFixed(0);
              _this.bidProportion = (
                (Number(_this.bid[0].vol) /
                  (Number(val[0].vol) + Number(_this.bid[0].vol))) *
                100
              ).toFixed(0);
            });
          }
        }
      },
      deep: true,
    },
    bid: {
      handler(val) {
        var _this = this;
        if (val[0]) {
          if (_this.ask[0]) {
            _this.$nextTick(() => {
              _this.askProportion = (
                (Number(_this.ask[0].vol) /
                  (Number(_this.ask[0].vol) + Number(val[0].vol))) *
                100
              ).toFixed(0);
              _this.bidProportion = (
                (Number(val[0].vol) /
                  (Number(_this.ask[0].vol) + Number(val[0].vol))) *
                100
              ).toFixed(0);
            });
          }
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="less">
.offer-box {
  width: 100%;
  .indicators {
    padding: 0 20px 14px;
    border-bottom: 1px solid @LightBorderLine;
    h2 {
      font-size: 12px;
      color: @fbSix;
      line-height: 30px;
    }
    .lists {
      width: 100%;
      li {
        font-size: 12px;
        color: @fbSix;
        line-height: 23px;
        width: calc((100% - 20px) / 2);
        float: left;
        span {
          float: right;
          color: @fff;
        }
      }
      li:nth-child(2n - 1) {
        margin-right: 20px;
      }
    }
  }
  .Margintradingadata {
    padding: 9px 20px 14px;
    border-bottom: 1px solid @LightBorderLine;
    h2 {
      font-size: 12px;
      color: @fff;
      line-height: 33px;
    }
    ul {
      width: 100%;
      li {
        float: left;
        font-size: 12px;
        color: @fbSix;
        width: 100%;
        line-height: 23px;
        span {
          float: right;
          color: @fff;
        }
      }
    }
  }
  .DealByDeal {
    padding: 10px 20px 15px;
    border-bottom: 1px solid @LightBorderLine;
    h2 {
      font-size: 12px;
      color: @fff;
      line-height: 30px;
      .label_icon {
        padding-left: 5px;
        height: 18px;
        padding-bottom: 3px;
        cursor: pointer;
      }
      .ico {
        background: url(~@/assets/img/icon_wh.png) no-repeat center;
        width: 18px;
        height: 18px;
        cursor: pointer;
        display: inline-block;
        position: relative;
        top: 5px;
        margin-left: 5px;
      }
      .ico:hover,
      .ico.hover {
        background: url(~@/assets/img/icon_whl.png) no-repeat center;
      }
    }
    .deal_title {
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: @fbSix;
      .deal_item {
        width: 50%;
        span {
          display: inline-block;
          width: 33%;
          text-align: center;
          &:first-child {
            text-align: left;
          }
          &:last-child {
            text-align: right;
          }
        }
      }
    }
    .trade_lists {
      width: 100%;
      height: 240px;
      overflow: auto;
      ul {
        li {
          float: left;
          display: inline;
          width: calc((100% - 15px) / 2);
          text-align: left;
          font-size: 12px;
          color: @fbSix;
          .li_items {
            display: flex;
            .li_fl {
              color: @fff;
              display: inline-block;
              flex: 1;
              text-align: left;
            }
            .li_fc {
              display: inline-block;
              flex: 1;
              text-align: center;
              // color: @fff;
            }
            .li_fr {
              flex: 1;
              text-align: right;
              white-space: nowrap;
            }
          }
          &:nth-child(2n) {
            text-align: right;
            float: right;
          }
        }
      }
    }
  }
  .SmellAndBuy {
    padding: 5px 20px 17px;
    border-bottom: 1px solid @LightBorderLine;
    .pan {
      display: flex;
      align-items: center;
      p {
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: @fff;
        line-height: 41px;
      }
    }
    .Proportion {
      width: 100%;
      height: 15px;
      color: @fff;
      line-height: 15px;
      position: relative;
      .color_pre {
        display: flex;
        align-items: center;
        height: 100%;
      }
      .fl_span {
        box-sizing: border-box;
        padding: 0 5px;
        position: absolute;
        line-height: 13px;
        bottom: 1px;
        left: 2px;
      }
      .fr_span {
        box-sizing: border-box;
        padding: 0 5px;
        right: 2px;
        position: absolute;
        bottom: 1px;
      }
    }
    .ul_left {
      width: 100%;
      float: left;
      width: calc((100% - 15px) / 2);
      .half {
        font-size: 12px;
        color: @fbSix;
        line-height: 20px;
        .list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .num {
            width: 15px;
            height: 15px;
            line-height: 15px;
            color: @fff;
            display: block;
            position: relative;
            top: 3px;
            text-align: center;
          }
          .kbs {
            color: @fbSix;
            width: 37%;
            text-align: right;
          }
          .list_price {
            text-align: right;
            width: 33%;
          }
        }
      }
    }
    .ul_right {
      width: 100%;
      float: right;
      width: calc((100% - 15px) / 2);
      .half {
        font-size: 12px;
        color: @fbSix;
        line-height: 20px;
        .list {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .num {
            width: 15px;
            height: 15px;
            line-height: 15px;
            color: @fff;
            display: block;
            top: 3px;
            text-align: center;
            // width: 30%;
          }
          .kbs {
            color: @fbSix;
            width: 37%;
          }
          .list_price {
            text-align: left;
            width: 30%;
          }
        }
      }
    }
  }
  .Economics {
    padding: 5px 20px 20px;
    position: relative;
    ul {
      position: relative;
      width: 100%;
      li {
        float: left;
        width: 50%;
        &::-webkit-scrollbar-thumb {
          background-color: transparent;
        }
        h2 {
          font-size: 12px;
          color: @fff;
          line-height: 40px;
        }
        .buy_pan {
          max-height: 300px;
          overflow: auto;
          .lists {
            width: 100%;
            box-sizing: border-box;
            padding: 0 8px;
            h3,
            p {
              width: 100%;
              float: left;
              font-size: 12px;
              color: @fff;
              line-height: 22px;
            }
            span {
              float: left;
              display: block;
              height: 22px;
            }
            span.first {
              width: 50px;
            }
            span.second {
              width: calc(100% - 50px - 15px);
              padding: 0 2px;
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            p span.second {
              width: calc(100% - 50px);
            }
            span.thrid {
              float: right;
            }
          }
        }
      }
    }
  }
  .white {
    color: @fff;
  }
}
</style>